import { useState } from 'react'
import './index.scss'
import { useDispatch, useSelector } from 'react-redux'
// 还要导入创建对象的方法
import { setCartList } from '../../../store/modules/takeaway'

const Foods = ({
  id,
  picture,
  name,
  unit,
  description,
  food_tag_list,
  month_saled,
  like_ratio_desc,
  price,
  tag
}) => {

  
  const [cart, setCart] = useState([])
  const [count, setCount] = useState(0) // 每一个的数据
  const dispatch = useDispatch()
  const { cartList } = useSelector((state) => state.foodList)

  const addGoods = () => {
    // 一进来就要获取
    setCart([...cartList])
    console.log('ar', cartList)
    console.log('cartList',cartList);
    const cartJudge = cart.filter((item) => item.id === id)
    setCount(count + 1)
    console.log('111', count)
    if (cartJudge.length === 0) {
      if (cart.length === 0) {
        // console.log('122', count)
        setCart([
          {
            id,
            picture,
            name,
            unit,
            description,
            food_tag_list,
            month_saled,
            like_ratio_desc,
            price,
            tag,
            count
          }
        ])
        console.log('全空，第一次')
      } else {
        // 不是第一次获取存储的那个列表
        setCart([
          ...cart,
          {
            id,
            picture,
            name,
            unit,
            description,
            food_tag_list,
            month_saled,
            like_ratio_desc,
            price,
            tag,
            count
          }
        ])
        console.log('里面有东西，第一次')
      }
      dispatch(setCartList(cart))
      console.log('添加')
    } else {
      console.log('第二次')
      setCount(cartJudge[0].count + 1)
      // 找到这个数据的id,有的话，就改掉他的count.
      const arr = [...cart]
      const newCart = arr.map(item =>{
        if(cartJudge[0].id === item.id){
          item.count = count
        }
        return item
      })
      setCart(newCart)
      dispatch(setCartList(cart))
    }
  }

  return (
    <dd className='cate-goods'>
      <div className='goods-img-wrap'>
        <img
          src={picture}
          alt=''
          className='goods-img'
        />
      </div>
      <div className='goods-info'>
        <div className='goods-desc'>
          <div className='goods-title'>{name}</div>
          <div className='goods-detail'>
            <div className='goods-unit'>{unit}</div>
            <div className='goods-detail-text'>{description}</div>
          </div>
          <div className='goods-tag'>{food_tag_list.join(' ')}</div>
          <div className='goods-sales-volume'>
            <span className='goods-num'>月售{month_saled}</span>
            <span className='goods-num'>{like_ratio_desc}</span>
          </div>
        </div>
        <div className='goods-price-count'>
          <div className='goods-price'>
            <span className='goods-price-unit'>¥</span>
            {price}
          </div>
          <div
            className='goods-count'
            onClick={addGoods}
          >
            {count}
            <span className='plus'></span>
          </div>
        </div>
      </div>
    </dd>
  )
}

export default Foods
